<template>
  <div>
    <el-dialog v-model="visible" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">申请提现</h4>
        </div>
      </template>

      <div>
        <el-form :model="formData" label-width="120px" ref="elFormRef">
          <el-form-item label="提现金额" prop="status">
            <el-input-number v-model="formData.money" />
          </el-form-item>

          <el-form-item label="提现方式">
            <el-radio-group v-model="formData.address">
              <el-radio :label="0">USDT <span style="color: red">{{ UserConfig?.data?.withdrawal_fee_usdt || 0 }} %</span></el-radio>
              <el-radio :label="1">PayPal <span style="color: red">{{ UserConfig?.data?.withdrawal_fee_paypal || 0 }} %</span></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="USDT 到账金额">
            <div>
               {{ formData.money - (formData.money  * UserConfig?.data?.withdrawal_fee_usdt/100)  }}
            </div>
          </el-form-item>
          <el-form-item label="paypal 到账金额">
            <div>
               {{ formData.money -(formData.money * UserConfig?.data?.withdrawal_fee_paypal/100) }}
            </div>
          </el-form-item>

          <el-form-item label="USDT 地址">
            <div>
              {{ UserConfig?.data?.address_usdt || '请去账户设置里面设置'}}
            </div>
          </el-form-item>
          <el-form-item label="paypal 地址">
            <div>
              {{  UserConfig?.data?.address_paypal || '请去账户设置里面设置'}}
            </div>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">关闭</el-button>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
  import { ref, onMounted } from 'vue'
  import { SetPayWithdrawalApi, GetAgentUserInfoApi } from '@/api/index'
  import { ElMessage } from 'element-plus'

  const UserConfig = ref();

  const fetchUserConfig = async () => {
    try {
      const response = await GetAgentUserInfoApi();
      UserConfig.value = response; // 假设 API 返回的数据结构是 { data: ... }
    } catch (error) {
      console.error('Failed to fetch user config:', error);
    }
  };

  const props = defineProps({
    orderStatus: {
      type: Object,
      default: () => ({})
    }
  });

  const formData = ref({
    money: '',
    address: ''
  });

  const visible = ref(false);
  const elFormRef = ref(null);

  const open = (config = { data: {} }) => {
    formData.value.id = config.data.id;
    visible.value = true;
  };

  const close = () => {
    visible.value = false;
  };

  const resetFormData = () => {
    if (elFormRef.value) {
      elFormRef.value.resetFields();
    }
  };

  const handleSubmit = async () => {
    try {
      const res = await SetPayWithdrawalApi(formData.value);
      ElMessage({
        message: `提现申请提交成功!`,
        type: 'success'
      });
      resetFormData();
      emit('reload');
      close();
    } catch (err) {
      console.log('handleSubmit', err);
      ElMessage({
        message: '提现申请提交失败!',
        type: 'error'
      });
      close();
    }
  };

  defineExpose({
    open
  });

  const emit = defineEmits(['reload']);

  onMounted(() => {
    fetchUserConfig();
  });
</script>

<style lang='scss' scoped></style>
